<script lang="ts" setup>
import { ref,watch } from "vue";
import { useRoute } from "vue-router";
import useMainContent from "@/components/PersonalPage/useMainContent.vue";
import useSearch from "@/components/PersonalPage/useSearch.vue";
import audios from '@/assets/audio/11.mp3';
// 评论的信息
const list = ref([
  {
    id: 0,
    type: 1,
    userId: 1,
    UserShareId: 1,
    title: "花园宝宝",
    author: "林东东",
    time: "2024-08-13 18:00",
    like: 20,
    commentShow: false,
    comment: "",
    audioStatus: false,
    audio: audios,
    list: [
      {
        id: 0,
        userId: 0,
        title: "路人甲",
        scoring: 5,
        comment: "爱听",
        time: "2024-08-13 18:00",
      },
      {
        id: 1,
        userId: 1,
        title: "老师",
        scoring: 3,
        comment: "无敌",
        time: "2024-08-13 18:00",
      },
    ],
  },
  {
    id: 1,
    type: 2,
    userId: 1,
    UserShareId: 1,
    title: "小星星",
    author: "赵夏秋",
    time: "2024-08-13 18:00",
    like: 2110,
    commentShow: false,
    comment: "",
    audioStatus: false,
    audio: audios,
    list: [
      {
        id: 0,
        userId: 0,
        title: "赵夏秋",
        scoring: 5,
        comment: "真不错，加油！",
        time: "2024-08-13 18:00",
      },
      {
        id: 1,
        userId: 1,
        title: "老师",
        scoring: 3,
        comment: "加油！",
        time: "2024-08-13 18:00",
      },
    ],
  },
  {
    id: 2,
    type: 0,
    userId: 1,
    UserShareId: 1,
    title: "熊出没",
    author: "张玉坤",
    time: "2024-08-13 18:00",
    like: 21,
    commentShow: false,
    comment: "",
    audioStatus: false,
    audio: audios,
    list: [
      {
        id: 0,
        userId: 0,
        title: "赵夏秋",
        scoring: 5,
        comment: "真不错，加油！",
        time: "2024-08-13 18:00",
      },
      {
        id: 1,
        userId: 1,
        title: "老师",
        scoring: 3,
        comment: "加油！",
        time: "2024-08-13 18:00",
      },
    ],
  },
  {
    id: 3,
    type: 3,
    userId: 1,
    UserShareId: 1,
    title: "花园宝宝",
    author: "林东东",
    time: "2024-08-13 18:00",
    like: 20,
    commentShow: false,
    comment: "",
    audioStatus: false,
    audio: audios,
    list: [
      {
        id: 0,
        userId: 0,
        title: "路人甲",
        scoring: 5,
        comment: "爱听",
        time: "2024-08-13 18:00",
      },
      {
        id: 1,
        userId: 1,
        title: "老师",
        scoring: 3,
        comment: "无敌",
        time: "2024-08-13 18:00",
      },
    ],
  },
  {
    id: 4,
    type: 4,
    userId: 1,
    UserShareId: 1,
    title: "小星星",
    author: "赵夏秋",
    time: "2024-08-13 18:00",
    like: 2110,
    commentShow: false,
    comment: "",
    audioStatus: false,
    audio: audios,
    list: [
      {
        id: 0,
        userId: 0,
        title: "赵夏秋",
        scoring: 5,
        comment: "真不错，加油！",
        time: "2024-08-13 18:00",
      },
      {
        id: 1,
        userId: 1,
        title: "老师",
        scoring: 3,
        comment: "加油！",
        time: "2024-08-13 18:00",
      },
    ],
  },
  {
    id: 5,
    type: 0,
    userId: 1,
    UserShareId: 1,
    title: "熊出没",
    author: "张玉坤",
    time: "2024-08-13 18:00",
    like: 21,
    commentShow: false,
    comment: "",
    audioStatus: false,
    audio: audios,
    list: [
      {
        id: 0,
        userId: 0,
        title: "赵夏秋",
        scoring: 5,
        comment: "真不错，加油！",
        time: "2024-08-13 18:00",
      },
      {
        id: 1,
        userId: 1,
        title: "老师",
        scoring: 3,
        comment: "加油！",
        time: "2024-08-13 18:00",
      },
    ],
  },
  {
    id: 6,
    type: 1,
    userId: 1,
    UserShareId: 1,
    title: "花园宝宝",
    author: "林东东",
    time: "2024-08-13 18:00",
    like: 20,
    commentShow: false,
    comment: "",
    audioStatus: false,
    audio: audios,
    list: [
      {
        id: 0,
        userId: 0,
        title: "路人甲",
        scoring: 5,
        comment: "爱听",
        time: "2024-08-13 18:00",
      },
      {
        id: 1,
        userId: 1,
        title: "老师",
        scoring: 3,
        comment: "无敌",
        time: "2024-08-13 18:00",
      },
    ],
  },
  {
    id: 7,
    type: 2,
    userId: 1,
    UserShareId: 1,
    title: "小星星",
    author: "赵夏秋",
    time: "2024-08-13 18:00",
    like: 2110,
    commentShow: false,
    comment: "",
    audioStatus: false,
    audio: audios,
    list: [
      {
        id: 0,
        userId: 0,
        title: "赵夏秋",
        scoring: 5,
        comment: "真不错，加油！",
        time: "2024-08-13 18:00",
      },
      {
        id: 1,
        userId: 1,
        title: "老师",
        scoring: 3,
        comment: "加油！",
        time: "2024-08-13 18:00",
      },
    ],
  },
  {
    id: 8,
    type: 3,
    userId: 1,
    UserShareId: 1,
    title: "熊出没",
    author: "张玉坤",
    time: "2024-08-13 18:00",
    like: 21,
    commentShow: false,
    comment: "",
    audioStatus: false,
    audio: audios,
    shaing:'小小音符师争霸赛',
    list: [
      {
        id: 0,
        userId: 0,
        title: "赵夏秋",
        scoring: 5,
        comment: "真不错，加油！",
        time: "2024-08-13 18:00",
      },
      {
        id: 1,
        userId: 1,
        title: "老师",
        scoring: 3,
        comment: "加油！",
        time: "2024-08-13 18:00",
      },
    ],
  },
  {
    id: 9,
    type: 0,
    userId: 1,
    UserShareId: 1,
    title: "熊出没",
    author: "张玉坤",
    time: "2024-08-13 18:00",
    like: 21,
    commentShow: false,
    comment: "",
    audioStatus: false,
    audio: audios,
    list: [
      {
        id: 0,
        userId: 0,
        title: "赵夏秋",
        scoring: 5,
        comment: "真不错，加油！",
        time: "2024-08-13 18:00",
      },
      {
        id: 1,
        userId: 1,
        title: "老师",
        scoring: 3,
        comment: "加油！",
        time: "2024-08-13 18:00",
      },
    ],
  },
]);

// 个人信息
const arr = ref({
  id: 1,
  // 学生个人
  studentName: "赵夏秋",
  // 班级管理
  className: {
    id: 0,
    name: "花园一班",
  },
  teacher: [
    {
      id: 0,
      name: "赵夏秋老师",
    },
    {
      id: 1,
      name: "赵紫潼",
    },
  ],
  classMembers: [
    {
      id: 0,
      name: "赵夏秋",
    },
    {
      id: 1,
      name: "学生二",
    },
    {
      id: 2,
      name: "学生三",
    },
    {
      id: 3,
      name: "学生四",
    },
    {
      id: 4,
      name: "学生五",
    },
    {
      id: 5,
      name: "学生六",
    },
    {
      id: 6,
      name: "学生七",
    },
    {
      id: 7,
      name: "学生八",
    },
    {
      id: 8,
      name: "学生九",
    },
    {
      id: 9,
      name: "学生十",
    },
    {
      id: 10,
      name: "学生十一",
    },
    {
      id: 11,
      name: "学生十二",
    },
    {
      id: 12,
      name: "学生十三",
    },
    {
      id: 13,
      name: "学生十四",
    },
    {
      id: 14,
      name: "学生十五",
    },
    {
      id: 15,
      name: "学生十六",
    },
    {
      id: 16,
      name: "学生十七",
    },
    {
      id: 17,
      name: "学生十八",
    },
    {
      id: 18,
      name: "学生十九",
    },
    {
      id: 19,
      name: "学生二十",
    },
    {
      id: 20,
      name: "学生二十一",
    },
    {
      id: 21,
      name: "学生二十二",
    },
    {
      id: 22,
      name: "学生二十三",
    },
    {
      id: 23,
      name: "学生二十四",
    },
    {
      id: 24,
      name: "学生二十五",
    },
    {
      id: 25,
      name: "学生二十六",
    },
    {
      id: 26,
      name: "学生二十七",
    },
    {
      id: 27,
      name: "学生二十八",
    },
    {
      id: 28,
      name: "学生二十九",
    },
    {
      id: 29,
      name: "学生三十",
    },
  ],
  // 教师个人
  teacherName: "赵夏秋老师",
  chargeClass: [
    {
      id: 0,
      name: "花园一班",
    },
    {
      id: 1,
      name: "花园二班",
    },
    {
      id: 2,
      name: "花园三班",
    },
  ],
  // 管理员名字
  adminName: "管理员",
  // 角色
  // role: [0],
  role: [1],
  // role: [3],
  // role: [2],
});
// 下拉框
interface iSelectArr {
  id: number;
  value: string;
  label: string;
}
const optionVal = ref("默认");
const selectArr = ref<iSelectArr[]>([
  { id: 0, value: "默认", label: "默认" },
  { id: 1, value: "小小音符师争霸赛", label: "小小音符师争霸赛" },
]);

let delData = ref({});
const clearArr = (data: iSelectArr) => {
  delData.value = data;
  selectArr.value = selectArr.value.filter((item) => item.id !== data.id);
  console.log(data, "删除");
  list.value.forEach((item) => {
    if (item.shaing == data.label) {
        item.shaing = '默认'
        Share.value = list.value
    }
  })
  console.log(list.value, "删除后");
  
};
const onSelect = (data: iSelectArr) => {
  console.log(data, "onSelect");
  Share.value = list.value.filter((item) => item.shaing == data.label);
  if(data.label == '默认'){
    Share.value = list.value 
  }
};
const selectChange = () => {
  if (optionVal.value == delData.value.label) {
    selectArr.value = selectArr.value.filter(
      (item) => item.id !== delData.value.id
    );
    optionVal.value = "";
  }
};

// 搜索
const inputVal = ref("");
const Share = ref(list.value.slice()); // 初始时复制一份原始数据给Share
const onSubmit = () => {
  if (inputVal.value !== "") {
    const itemIndex = list.value.filter((item) =>
      item.title.includes(inputVal.value)
    );
    Share.value = itemIndex;
  } else {
    alert("输入框不能为空");
  }
};

// 点赞
const onLike = (done) => {
  console.log("done: ", done);
};
// 评论
const onComment = (id) => {
  list.value[id].commentShow = !list.value[id].commentShow;
};
// 发送
const onSend = (obj) => {
  console.log("obj: ", obj);
  console.log("list.value: ", list.value[obj.pid]);
  list.value[obj.pid].list.unshift(obj);
};
// 删除评论
const onDelItem = (obj) => {
  list.value[obj.pid].list = list.value[obj.pid].list.filter(
    (item) => item.id !== obj.id
  );
};
// 删除音乐
const clearTrack = (id) => {
  console.log(id);
  Share.value.forEach((item, index) => {
    if (item.id === id) {
      Share.value.splice(index, 1);
    }
  });
  console.log("list.value: ", list.value);
};
// 切换音乐
// 切换音乐
const currentAudio = ref(null);
const changeAudio = (obj) => {
  list.value.forEach((item, index) => {
    if (item.id === obj.id) {
      // 当前音频的状态保持不变
      list.value[index].audioStatus = obj.audioStatus;
    } else {
      // 对于其他音频
      if (item.audioStatus) {
        // 如果音频正在播放，需要保持其状态
        if (currentAudio.value && currentAudio.value.id === item.id) {
          // 当前播放的音频，不做处理
          return;
        }
      }
      // 停止并重置未播放的音频
      list.value[index].audioStatus = false; // 设置状态为停止
    }
  });
};
// 切换播放/暂停状态
const suspend = (obj) => {
  list.value.forEach((item, index) => {
    if (item.id === obj.id) {
      // 当前音频的状态保持不变
      list.value[index].audioStatus = obj.audioStatus;
    }
  });
};
//获取当前页面的路由
const route = useRoute();
console.log("route: ", route.path);

</script>
<template>
  <div class="container">
    <h2>欢迎来到藤养学园社区</h2>
    <div class="search">
      <input type="text" placeholder="关键字搜索" v-model="inputVal" />
      <button @click="onSubmit">搜索</button>
    </div>

    <div class="main">
      <useSearch
        v-model:first-name="optionVal"
        :selectArr="selectArr"
        :userData="arr"
        @selectChange="selectChange"
        @onSelect="onSelect"
        @clearArr="clearArr"
      />
      <div class="back">
        <div class="backList">
          <useMainContent
            v-for="item in Share"
            :key="item.id"
            :data="item"
            :userData="arr"
            :path="route.path"
            @onLike="onLike"
            v-model:commentVal="item.comment"
            @onComment="onComment"
            @onSend="onSend"
            @onDelItem="onDelItem"
            @clearTrack="clearTrack"
            @changeAudio="changeAudio"
            @suspend="suspend"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.container {
  width: 100%;
  height: 86vh;
  // padding: 20px;
  overflow: hidden;
  h2 {
    font-size: 50px;
    color: #118d0f;
    /*字体间隔*/
    // letter-spacing: 7px;
     font-family: "LiSu"
  }

  input {
    width: 300px;
    height: 30px;
    border: 1px solid #ccc;
    padding-left: 10px;
    /*消除默认边框*/
    outline: none;
  }

  button {
    width: 50px;
    height: 30px;
    border: 0;
    background-color: rgb(236, 182, 73);
    color: #fff;
  }
}

.search {
  display: flex;
  height: 60px;
  margin-top: 0px;
  align-items: center;
}

.main {
  margin-top: 20px;
  width: 100%;
  background-color: white;
  padding: 20px;
  .back {
    height: 86vh;
    margin-top: 20px;
    overflow: hidden;
    .backList {
      height: 100%;
      overflow-y: auto;
      .content:last-child {
        margin-bottom: 220px;
      }
    }
    .backList:last-child {
      padding-bottom: 220px;
    }
  }
}
.backList::-webkit-scrollbar {
  width: 0px; /* 隐藏滚动条 */
}

.backList {
  scrollbar-width: none; /* Firefox 隐藏滚动条 */
}

.backList {
  -ms-overflow-style: none; /* IE 和 Edge 隐藏滚动条 */
}
</style>
